<div class="dialog-dam">
  <div class="title">
    <nz-range-picker nzFormat="yyyy-MM-dd" [nzPlaceHolder]="['开始时间', '结束时间']" ngModel
      (ngModelChange)="onChange($event)"></nz-range-picker>
    <button nz-button nzType="primary" (click)="initData()">
      确定
    </button>
  </div>
  <div class="status">
    <div class="title">
      <span>开启闸门: {{ data.validStrobe || '-' }} m</span>
      <span>闸前水位: {{ data.heightUp || '-' }} m</span>
      <span>闸后水位: {{ data.heightDown || '-' }} m</span>
      <span>流量: {{ data.flux || '-' }} m³/s</span>
    </div>
  </div>
  <!-- <ng-container *ngIf="strobeNum <= 3">
    <div class="diagram-gate">
      <img class="gate-bg" [src]="'./assets/images/map/monitor/gate-bg' + strobeNum + '.png'" alt="" />
      <div class="gate-wrap" [ngClass]="'gate-wrap' + strobeNum">
        <div class="gate-box" *ngFor="let d of data.degree">
          <div class="gate" [style.height]="(100 - d / (gateHeight*10)) + '%'"></div>
          <img *ngIf="!d" class="gate-dangban" src="./assets/images/map/monitor/dangban.png" alt="" />
          <img *ngIf="d" class="gate-dangban" src="./assets/images/map/monitor/dangban1.png" alt="" />
        </div>
      </div>
      <div class="water-box" [ngClass]="'water-box' + strobeNum">
        <img [src]="'./assets/images/map/monitor/water' + strobeNum + '.png'" alt="" />
        <div class="water" [ngClass]="'water' + strobeNum"></div>
      </div>
    </div>
    <div echarts [options]="processOpt" [merge]="processOptChange" style="height: 200px;"></div>
    <div class="chart-wrap">
      <div class="chart-box" *ngFor="let item of degreeOptChanges;let idx = index" [style.width]="100/strobeNum + '%'">
        <div class="chart-title">闸{{ idx + 1 }}</div>
        <div echarts [options]="degreeOpt" [merge]="degreeOptChanges[idx]" style="width: 100%;height: 160px;"></div>
      </div>
    </div>
  </ng-container> -->
  <ng-container>
    <div echarts [options]="processOpt" [merge]="processOptChange" style="height: 200px;"></div>
    <div class="chart-wrap1" *ngFor="let item of degreeOptChanges;let idx = index">
      <div class="chart-title">{{ idx + 1 }}#</div>
      <div class="gate-wrap">
        <div class="gate-box">
          <div class="gate" [style.height]="(100 - data.degree[idx] / (gateHeight*10)) + '%'"></div>
          <img *ngIf="!data.degree[idx]" class="gate-dangban" src="./assets/images/map/monitor/dangban.png" alt="" />
          <img *ngIf="data.degree[idx]" class="gate-dangban" src="./assets/images/map/monitor/dangban1.png" alt="" />
        </div>
        <div class="water-box">
          <div class="water"></div>
        </div>
      </div>
      <div class="chart-box">
        <div echarts [options]="degreeOpt" [merge]="degreeOptChanges[idx]" style="width: 100%;height: 160px;"></div>
      </div>
    </div>
  </ng-container>
  <!-- <nz-tabset (nzSelectChange)="onSelectChange($event)">
    <nz-tab *ngFor="let item of tabs; let idx = index" [nzTitle]="item">
      <ng-container *ngIf="idx == 0">
        <div class="status">
          <div class="title">
            <span>闸前水位: {{ gateStatus.heightUp || '-' }} m</span>
            <span>闸后水位: {{ gateStatus.heightDown || '-' }} m</span>
            <span>流量: {{ gateStatus.flux || '-' }} m³/s</span>
          </div>
          <nz-table #table nzBordered [nzData]="gateStatus.degree" [nzShowPagination]="false">
            <thead>
              <tr>
                <th>闸门序号</th>
                <th>闸门开度(m)</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let item of table.data;let idx = index">
                <td>{{ idx+1 }}</td>
                <td>{{ item }}</td>
              </tr>
            </tbody>
          </nz-table>
        </div>
      </ng-container>
      <ng-container *ngIf="idx == 2">
        <div class="title">
          <nz-range-picker nzFormat="yyyy-MM-dd" [nzPlaceHolder]="['开始时间', '结束时间']" ngModel
            (ngModelChange)="onChange($event)"></nz-range-picker>
          <button nz-button nzType="primary" (click)="initData()">
            确定
          </button>
        </div>
        <div echarts [options]="processOpt" [merge]="processOptChange" style="height: 420px;"></div>
      </ng-container>
      <ng-container *ngIf="idx == 1">
        <div class="title">
          <nz-range-picker nzFormat="yyyy-MM-dd" [nzPlaceHolder]="['开始时间', '结束时间']" ngModel
            (ngModelChange)="onChange($event)"></nz-range-picker>
          <button nz-button nzType="primary" (click)="initData()">
            确定
          </button>
        </div>
        <div echarts [options]="processOpt1" [merge]="processOptChange1" style="height: 420px;"></div>
      </ng-container>
    </nz-tab>
  </nz-tabset> -->
</div>
